<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="author" content="JZH">
    <title>换肤</title>
    <link rel="stylesheet" href="css/green.css">
</head>
<body>
     <div id="outer">
         <ul id="skin">
             <li id="red" title="红色"></li>
             <li id="green" class="current" title="绿色">绿</li>
             <li id="black" title="黑色">黑</li>
         </ul>
         <!--ul#nav>li*6>a-->
          <ul id="nav">
              <li><a href="javascript:;"></a>新闻</li>
              <li><a href="javascript:;"></a>娱乐</li>
              <li><a href="javascript:;"></a>体育</li>
              <li><a href="javascript:;"></a>电影</li>
              <li><a href="javascript:;"></a>音乐</li>
              <li class="last"><a href="javascript:;"></a>旅游</li>
          </ul>
     </div>
</body>
<html>
<script>
    window.onload = function ()
    {
        var oLink = document.getElementsByTagName("link")[0];
        
        var oSkin = document.getElementById("skin").
        getElementsByTagName("li");

        for(var i = 0; i< oSkin.length; i++)
        {
            oSkin[i].onclick = function ()
            {
                    // 清空所有li标签的类名
                for(var p in oSkin) {
                        oSkin[p].className = "";
                }
                // 给所点击的li标签添加类名
                this.className = "current";
                // 链接相应的css文档
                oLink['href'] = "css/" + this.id + ".css";
            }
        }

    };        
</script>